<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
        >操作按钮</el-button>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{ '列表内容 ' + o }}
      </div>
    </el-card>
    <hr>

    <h3>导出功能</h3>
    <el-button type="primary" @click="exportFN">导出</el-button>
  </div>
</template>

<script>
import { export_json_to_excel } from '@/vendor/Export2Excel'
export default {
  methods: {
    exportFN() {
      export_json_to_excel({
        header: ['姓名', '地址'],
        data: [
          ['后生仔', '宝安'],
          ['杀马特', '广州']
        ],
        filename: '测试保存'
      })
    }
  }
}
</script>

<style lang="scss">
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
